<template>
	<view class="container">
		<!-- coin_num: 5000
		create_time: "2023-08-28 11:41:36"
		o_number: "R202308284096244"
		o_price: "0.05"
		pay_time: "2023-08-28 11:41:36" -->
		
		<view class="card" v-for="(item,index) in playLogList">
			<view class="listStyle">
				<view class="listKey">交易流水号：</view>
				<view class="listValue">{{item.o_number}}</view>
			</view>
			<view class="listStyle">
				<view class="listKey">购置菜币：</view>
				<view class="listValue">
					<image src="/static/image/cbnew.png" mode="widthFix" style="width:30rpx;"></image>
					{{item.coin_num}}
				</view>
			</view>
			<view class="listStyle">
				<view class="listKey">实付金额：</view>
				<view class="listValue"> ￥ <text class="priceFont">{{item.o_price}}</text></view>
			</view>
			<view  class="listStyle">
				<view class="listKey">支付时间：</view>
				<view class="listValue">{{item.pay_time}}</view>
			</view>
		</view>
		
		<view v-if="playLogList.length<=0" class="tipsWrapper">
			当前暂无充值信息
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				playLogList:[]
			}
		},
		onLoad() {
			this.getRechargeList()
		},
		methods: {
			async getRechargeList(){
				const {data} = await this.$http('/appapi/play_with/paylog')
				this.playLogList=data
			}
		}
	}
</script>

<style scoped>
	.priceFont{
		font-size: 40rpx;
		font-weight: 400;
	}
	.container{
		background-color: #F8F8F8;
		min-height: 100vh;
		padding-top: 10rpx;
		padding-bottom: 20rpx;
	}
	.card {
		width: 95%;
		background-color: #ffffff;
		margin: 20rpx auto;
		padding: 25rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		font-size: 30rpx;
	}
	.listStyle {
		display: flex;
		justify-content: space-between;
		margin: 12rpx 5rpx;
		box-sizing: border-box;
	}
	
	.listkey {
		color: #A3A5AE;
	}
	
	.listValue {
		color: #898385;
	}
	
	.tipsWrapper {
		font-size: 25rpx;
		color: #8E9897;
		padding: 50rpx;
		text-align: center;
	}
	
</style>
